<h1>注册</h1>
<% unless @user.errors.empty? %>
  <div class="alert alert-danger">
    <ul>
      <% @user.errors.messages.values.flatten.each do |error| %>
        <li><%= error %></li>
      <% end -%>
    </ul>
  </div>
<% end -%>

<input type="hidden" name="signup_type" value="<%= @is_using_email ? "email" : 'cellphone' %>"/>

<%= form_for :user, url: users_path, method: :post, html: { class: 'form-horizontal', id: "user_form" } do |f| %>
  <div class="form-group email-inner <%= @is_using_email ? '' : 'hide' %>">
    <label class="col-sm-2 control-label">邮箱 *</label>
    <div class="col-sm-10">
      <%= f.text_field :email, class: "form-control", disabled: !@is_using_email %>
      <%= link_to "使用手机号", 'javascript:;', class: "switch-btn" %>
    </div>
  </div>
  <div class="form-group cellphone-inner <%= @is_using_email ? 'hide' : '' %>">
    <label class="col-sm-2 control-label">手机号 *</label>
    <div class="col-sm-4">
      <%= f.text_field :cellphone, class: "form-control", disabled: @is_using_email %>
      <%= link_to "使用邮箱", 'javascript:;', class: 'switch-btn' %>
    </div>
    <div class="col-sm-4">
      <%= f.text_field :token, class: "form-control", placeholder: "手机验证码" %>
    </div>
    <div class="col-sm-2">
      <input type="button" value="获取验证码" class="btn btn-warning fetch-token-btn" data-url="<%= cellphone_tokens_path %>"/>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">密码 *</label>
    <div class="col-sm-10">
      <%= f.password_field :password, class: "form-control" %>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码确认 *</label>
    <div class="col-sm-10">
      <%= f.password_field :password_confirmation, class: "form-control" %>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <input type="submit" name="create_user_submit" value="创建账户" class="btn btn-primary">
    </div>
  </div>
<% end -%>

<%= content_for :javascripts do %>
  <script>
      (function () {
          var usingEmail = $('input[name="signup_type"]').val() == 'email';
          $('.switch-btn').click(function () {
              if (usingEmail) {
                  $('.email-inner').addClass('hide').find('input[type="text"]').prop('disabled', 1);
                  $('.cellphone-inner').removeClass('hide').find('input[type="text"]').prop('disabled', false);
                  usingEmail = false;
              } else {
                  $('.email-inner').removeClass('hide').find('input[type="text"]').prop('disabled', false);
                  $('.cellphone-inner').addClass('hide').find('input[type="text"]').prop('disabled', 1);
                  usingEmail = true;
              }
          })

          // 验证码
          var CELLPHONE_RE = /^(\+86|86)?1\d{10}$/;
          var token_wait = 60,
              token_interval,
              $token_btn = $('.fetch-token-btn');
          $token_btn.click(function () {
              var $this = $(this),
                  cellphone = $('#user_cellphone').val();
              $.ajax({
                  url: $this.data('url'),
                  method: 'post',
                  data: {cellphone: cellphone},
                  beforeSend: function () {
                      if (!CELLPHONE_RE.test(cellphone)) {
                          alert("手机号码格式错误!");
                          return false;
                      }

                      $this.data('old-value', $this.attr('value'));
                      $this.attr('value', "发送中...").prop('disabled', true);
                  },
                  success: function (data) {
                      if (data.status == 'error') {
                          alert(data.message);
                      } else {
                          $this.attr('value', $this.data('old-value'));
                          $this.trigger('start_token_timer');
                      }
                  }
              })

          })
              .on('start_token_timer', function () {
                  token_interval = setInterval(function () {
                      $token_btn.trigger('token_timer');
                  }, 1000);
              })
              .on('token_timer', function () {
                  token_wait--;
                  if (token_wait <= 0) {
                      clearInterval(token_interval);
                      $token_btn.attr('value', '获取短信验证码').prop('disabled', false);
                      token_wait = 60;
                  } else {
                      $token_btn.attr('value', '重新发送 ' + token_wait + ' 秒').prop('disabled', true);
                  }
              })

      })()
  </script>
<% end %>